<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas">
    你的浏览器不支持, 请升级浏览器
  </canvas>
  <script>
    var myCanvas = document.querySelector("#canvas");// 获取画布对象
    console.log(myCanvas);
    myCanvas.width = "800"
    myCanvas.height = "500"
    var ctx = myCanvas.getContext("2d");//获取上下文对象(画笔)
    ctx.beginPath();//开始路径


    ctx.moveTo(200, 20);//将画笔移动到
    ctx.lineTo(50, 350);//线移动到位置
    ctx.lineTo(350, 350);//线移动到位置

    ctx.fillStyle = "pink"//填充颜色
    ctx.fill()//填充


    ctx.closePath();//结束路径
    ctx.strokeStyle = "blue"//描边颜色
    ctx.lineWidth = "4"//描边粗细
    ctx.stroke()//描线

  </script>
</body>

</html>